<template>
	<!-- 个人中心 -->
	<div class="mine-container">
		<div v-if="user">
			<van-row class="user" align="center">
				<van-col class="user-head" span="6">
					<van-image round alt="round" width="46px" height="46px" fit="cover" position="left"
						v-bind:src="user.header" />
				</van-col>
				<van-col span="18">
					<div class="user-nick" @click="readInfo()">
						{{user.nick}}
					</div>
				</van-col>
			</van-row>
		</div>
		<div v-else>
			<van-row class="user" align="center">
				<van-col class="user-head" span="6">
					<van-image round alt="round" width="46px" height="46px" fit="cover" position="left"
						v-bind:src="headPath(head)" />
				</van-col>
				<van-col span="18">
					<div class="user-nick" @click="login()">
						未登录
					</div>
				</van-col>
			</van-row>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				"user": null,
				"head": "./../../assets/imgs/icDefault.jpeg"
			}
		},
		mounted() {
			if (this.$store.getters.isLogin) {
				// 已经登录
				this.user = this.$store.getters.userInfo
			} else {
				
			}
		},
		methods: {
			login() {
				if (this.$store.getters.isLogin) {
					// 已经登录
					console.log("已登录");
					this.$router.push("/userinfo")
				} else {
					console.log("未登录");
					this.$router.push("/login")
				}
			},
			headPath(path){
				return new URL('./../../assets/imgs/icDefault.jpeg', import.meta.url).href
			},
			readInfo() {
				this.$router.push("/userinfo")
			},

		}
	}
</script>

<style lang="scss">
	.mine-container {
		& .user {
			margin: 0 16px 0 16px;
			padding-top: 20px;

			& .user-nick {
				padding-left: 20px;
			}
		}

		& .user-nick {
			padding-left: 20px;
		}

		& .login {
			align-items: center;
			display: flex;
			text-align: center;
			margin: 0 auto;
		}

		// 去除 默认属性
		& .van-col {
			display: contents;
		}

		& .col-img {
			display: contents;
			align-items: center;
			text-align: center;
			margin: 0 auto;
		}
	}
</style>